<template>
  <div class="login">
    <input type="text" placeholder="用户名" v-model="username">
    <input type="password" placeholder="密码" v-model="password" @keyup.enter="login" >
    <div class="login-btns">
      <el-button type="primary" @click="login" :loading="loginLoading" >{{loginBtn}}</el-button>
    </div>
    <div class="login-do">
      <el-checkbox v-model="savepass">记住密码</el-checkbox>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import qs from 'qs';
export default {
  name: 'login',
  data(){
    return {
      savepass: false,
      username: '',
      password: '',
      loginLoading: false,
      loginBtn: '登录'
    }
  },
  mounted(){
    if(localStorage.username){
      this.username = localStorage.username
    }
    if(localStorage.token){
      this.password = localStorage.token
    }
  },
  methods: {
    doLogin(){
      let tid = this.$route.params.tid
      this.tid = tid
        return this.$http.post('/vrv-monitor-platform-web/login',{
          "account": this.username,
          "password": this.password,
        }).then(res=>res.data)
    },
    login: function(){
      if(!this.username || !this.password){
        this.$message.error('登录失败：请输入用户名和密码');
        return;
      }
      this.loginLoading = true;
      this.loginBtn = '正在登录...'
      this.doLogin().then(data => {
        this.loginLoading = false;
        this.loginBtn = '登录';
        if(data.success===true){
          if(this.savepass){
            localStorage.username = this.username;
            localStorage.token = this.password;
          }else{
            localStorage.removeItem('usernam')
            localStorage.removeItem('token')
          }
          this.$router.push('/home');
        }else{
          this.$message.error('登录失败：用户名或密码错误');
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.el-input__inner
  padding-left 70px 
input
  display block
  border-radius 4px
  width  268px
  height 36px
  margin-bottom 25px
  padding-left 75px
  border none
  box-sizing border-box
  &[type="text"]
    background #fff url(../assets/person.png) no-repeat
    background-position 15px 9px
    color #999
  &[type="password"]
    background #fff url(../assets/lock.png)  no-repeat
    background-position 15px 9px
    color #999

.login-input
.login-do
  margin-bottom 25px
  font-size 0.88rem
  color #d2d2d2
  overflow hidden
  >a 
    float right
    font-size 14px
    text-decoration none
    color #d2d2d2

.login-btns
  margin-bottom 15px
  >.el-button
    width 100%
    background #ec6941
    border 0
    
.el-checkbox
  color #d2d2d2 


</style>
